<template>
  <div>
    <footer>
      <div class='footer-content'>
        <div class='left'>
          <p>
            <a href=''>服务条款</a>
            <span>|</span>
            <a href=''>隐私政策</a>
            <span>|</span>
            <a href=''>儿童隐私政策</a>
            <span>|</span>
            <a href=''>版权投诉指引</a>
            <span>|</span>
            <a href=''>意见反馈</a>
            <span>|</span>
          </p>
          <p>
            <span>网易公司版权所有©1997-2021</span>
            <span>杭州乐读科技有限公司运营：</span>
            <a href='https://p1.music.126.net/Mos9LTpl6kYt6YTutA6gjg==/109951164248627501.png' target='_blank'
               class='alink s-fc3'>浙网文[2018]3506-263号</a>
          </p>
          <p>
            <span>违法和不良信息举报电话：0571-89853516</span>
            <span>举报邮箱：</span>
            <a class='alink' href='mailto:ncm5990@163.com'>ncm5990@163.com</a>
          </p>


          <p>
            <a href='https://beian.miit.gov.cn/#/Integrated/index'>粤B2-20090191-18&nbsp;&nbsp;工业和信息化部备案管理系统网站</a>
            <a href='http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33010902002564'>
              <span class='police-logo'></span>
              <span class='police-text'>浙公网安备 33010902002564号</span>
            </a>
            <a class='alink' href='mailto:ncm5990@163.com'>ncm5990@163.com</a>
          </p>


        </div>
        <div class='right'>
          <ul class='dmeo'>
            <li>
              <a class='amped' href=''></a>
              <span></span>
            </li>
            <li>
              <a class='user' href=''></a>
              <span></span>
            </li>
            <li>
              <a class='music' href=''></a>
              <span></span>
            </li>
            <li>
              <a class='good' href=''></a>
              <span></span>
            </li>
            <li>
              <a class='prect' href=''></a>
              <span></span>
            </li>

          </ul>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'Footer'
}
</script>

<style scoped lang='less'>
.dmeo {
  display: flex;
  align-items: center;
}
.amped{
  background-position: -60px -456.5px!important;
}
.amped + span{
  background-position: 0 -108px!important;
}
.user + span{
  background-position: -1px -91px!important;
}
.user{
  background-position: -60px -101px!important;
}

.music{
  background-position: 0 0!important;
}
.good + span{
  background-position: 0 -54px!important;
}
.good{
  background-position: -60px -50px!important;
}
.prect + span{
  background-position: -1px -72px!important;
}
.prect{
  background-position: 0 -101px!important;
}
.right{
  margin-top: 33px;
}
.right ul {
  display: flex;
}
.right ul li{
  position: relative;
}
.right ul li span {
  display: inline-block;
  margin: 5px 5px 0;
  background: url("../../assets/images/foot_enter_tt.png");
  width: 72px;
  height: 14px;
  background-size: 180px 139px;
  position: absolute;
  left: 25px;
}

.right ul li a {
  background: url("../../assets/images/foot_enter_new.png");
  background-size: 110px 552px;
  display: block;
  float: none;
  width: 50px;
  height: 45px;
  margin: 0 auto;
  cursor: pointer;
  margin-left: 30px;
  text-align: center;
  color: #666;
}

.police-logo {
  background: url("../../assets/images/police.png");
  width: 14px;
  height: 14px;
  background-size: cover;
  cursor: pointer;
  display: inline-block;
  margin-right: 2px;
  vertical-align: -2px;
}

.left p:nth-child(1) span {
  margin: 0 8px 0 10px;
  color: #c2c2c2;

}

.left {
  width: 520px;
  padding-top: 15px;
  line-height: 24px;
  display: flex;
  flex-direction: column;
  justify-content: left;

}

.footer-content {
  width: 980px;
  margin: 0 auto;
  display: flex;
}

footer {
  width: 100%;
  height: 173px;
  background: #f2f2f2;
  font-size: 12px;
  margin-bottom: 46px;
  border-top: 1px solid #d3d3d3;
}

p {
  font-size: 12px;
  float: left;
}

a {
  font-size: 12px;
  color: #999;
}

a:hover {
  text-decoration: underline;
}

span {
  color: #666;
}
</style>